<template>
  <div class="contain">
    <div class="operation-contain">
      <div class="operation-left">
        <el-input v-model="list.filters.search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" size="medium" @input="getSearch"></el-input>
        <el-select v-model="list.filters.type" placeholder="请选择" clearable size="medium" @change="getSearch">
          <el-option label="收入" value="1"></el-option>
          <el-option label="支出" value="0"></el-option>
        </el-select>
      </div>
      <div class="operation-right">
        <el-button v-perms="'info:account:add'" type="primary" @click="$refs.myDialog.open()" size="medium" class="el-icon-circle-plus-outline" plain> 新增</el-button>
        <el-button v-perms="'info:account:delete'" type="danger" @click="batchDelete" size="medium" class="el-icon-delete pad" :disabled="multipleSelection.length > 0 ? false : true"> 删除</el-button>
        <d-dropdown :isShow.sync="isShow"/>
      </div>
    </div>
    <div class="table-contain">
      <el-table
        ref="table"
        :data="list.data"
        style="width: 100%;"
        height="100%"
        row-key="id"
        border
        stripe
        :summary-method="getSummaries"
        show-summary
        v-loading="list.loading"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" reserve-selection align="center">
        </el-table-column>
        <el-table-column v-if="isShow[0].value" align="center" label="分类" sortable="custom" prop="tag" min-width="120">
          <template v-slot="{ row }">
            <i :class="row.tag.icon"></i> {{ row.tag.name }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[1].value" align="center" label="类别" sortable="custom" prop="type" min-width="120">
          <template v-slot="{ row }">
            <el-tag v-if="row.type === 1" type="success">收入</el-tag>
            <el-tag v-else type="danger">支出</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[2].value" label="金额" min-width="120" align="center" sortable="custom" prop="money">
          <template v-slot="{ row }">
            <span v-if="row.type === 1" style="color: #67c23a;">{{ row.money }} </span>
            <span v-else style="color: #f56c6c;">{{ row.money }} </span>
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[3].value" align="center" label="支付方式" sortable="custom" prop="pay" min-width="150">
          <template v-slot="{ row }">
            {{ row.pay }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[4].value" align="center" label="支付时间" sortable="custom" prop="ptime" min-width="150">
          <template v-slot="{ row }">
            {{ row.ptime }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[5].value" align="center" label="定位" sortable="custom" prop="location" min-width="170">
          <template v-slot="{ row }">
            {{ row.location.city.join('') }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[6].value" label="创建时间" align="center" sortable="custom" prop="ctime" min-width="180">
          <template v-slot="{ row }">
            {{ row.ctime }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[7].value" label="更新时间" align="center" sortable="custom" prop="mtime" min-width="180">
          <template v-slot="{ row }">
            {{ row.mtime }}
          </template>
        </el-table-column>
        <el-table-column v-if="isShow[8].value" label="备注" sortable="custom" align="center" prop="remark" min-width="120">
          <template v-slot="{ row }">
            {{ row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center" >
          <template v-slot="{ row }">
            <el-button v-perms="'info:account:detail'" type="success" icon="el-icon-edit" class="pad" size="mini" @click="$refs.myDialog.detaliInfo(row.id)"></el-button>
            <el-popconfirm
              @confirm="confirmDelete(row.id)"
              title="确定删除这条信息吗？">
              <el-button v-perms="'info:account:delete'" slot="reference" type="danger" icon="el-icon-delete" size="mini"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dPagination :page.sync="list.page" :size.sync="list.size" :total="list.total" @getList="getList" />
    <list-dialog ref="myDialog" :dialogVisible.sync="dialogVisible" @getAll="getList" :list="list.data" />
  </div>
</template>

<script>
import listDialog from './ListDialog'
export default {
  name: 'CollectList',
  components: {
    listDialog
  },
  data () {
    return {
      isShow: [
        { label: '分类', value: true, disable: false },
        { label: '类别', value: true, disable: false },
        { label: '金额', value: true, disable: false },
        { label: '支付方式', value: true, disable: false },
        { label: '支付时间', value: true, disable: false },
        { label: '定位', value: true, disable: false },
        { label: '创建时间', value: true, disable: false },
        { label: '更新时间', value: false, disable: false },
        { label: '备注', value: false, disable: false },
      ],
      list: {
        data: [],
        loading: false,
        page: 1,
        total: 0,
        size: 10,
        filters: {
          search: '',
          prop: '',
          order: '',
          type: null
        }
      },
      dialogVisible: false,
      multipleSelection: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        if (column.label === '类别' && index === 2) {
          sums[index] = 'N/A'
          return
        }
        const values = data.map(item => {
          if (item.type === 1) {
            return Number(item[column.property])
          } else if (item.type === 0) {
            return -Number(item[column.property])
          }
        })
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0);
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },
    getSearch () {
      this.list.page = 1
      this.getList()
    },
    handleSelectionChange (val) { // 当选择项发生变化时会触发该事件
      this.multipleSelection = val
    },
    // 排序回调（prop 排序字段 order 排序方式）
    sortChange (column) {
      if (column.order == 'ascending') {
        this.list.filters.order = 'asc'
      } else {
        this.list.filters.order = 'desc'
      }
      this.list.filters.prop = column.prop
      this.getList()
    },
    getList () { // 获取列表
      this.list.loading = true
      this.$API({
        name: 'GetAccountList',
        params: {
          page: this.list.page,
          size: this.list.size,
          search: this.list.filters.search,
          order: this.list.filters.prop,
          sort: this.list.filters.order,
          type: this.list.filters.type
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.list.data = res.data.data.data
          this.list.total = res.data.data.count
          this.list.data.forEach(item => {
            item.tag = JSON.parse(item.tag)
          })
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.list.loading = false
      })
    },
    confirmDelete (id) { // 删除
      this.$API({
        name: 'DeleteAccount',
        paths: [id],
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200 && res.data.data === 1) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.getList()
      })
    },
    batchDelete () { // 批量删除

    }
  },
  // 解决 el-table 更新列时的抖动问题
  beforeUpdate() {
    this.$nextTick(() => {
      // 在数据加载完，重新渲染表格
      this.$refs.table.doLayout()
    }) 
  },
}
</script>

<style lang="scss" scoped>
.contain {
  height: 100% !important;
  display: flex;
  flex-direction: column;
  .operation-contain {
    height: 46px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    .operation-left {
      .el-input {
        margin-right: 10px;
      }
      .el-input, .el-select {
        width: 175px;
        margin-bottom: 10px;
      }
    }
  }
  .table-contain {
    overflow: auto !important;
    flex: 1 1 auto;
  }
}
</style>